<template>
	<view class="modal">
		<view class="modal-bkg" />
		<view class="modal-pop">
			<view class="close" @tap="close">
				<img src="@/static/icon/icon_16_close_w@2x.png" alt="">
			</view>
			<view class="pop-main">
				<view class="title">提交视频</view>
				<view class="main">
					<view class="status doing" v-if="videoStatus== 1">
						<img v-if="videoStatus == 1" class="icon" src="@/static/icon/icon_16_vid_review_r@2x.png" alt="">
						<!-- <img v-else-if="videoStatus == 3" class="icon" src="@/static/icon/icon_16_vid_review_r@2x.png" alt=""> -->
						<view class="desc">
							视频审核中
						</view>
					</view>
					<view class="status fail" v-if="videoStatus== 4">
						<img  class="icon" src="@/static/icon/icon_16_close_r@2x.png" alt="">
						<view class="desc">
							视频内容审核未通过
						</view>
					</view>
					<input type="text" @input="inputChange" :value="videolink" placeholder="请输入视频链接" :disabled="videoStatus == 1 ? true : false">
					<view class="input-desc">
						*请确保视频发布者为当前帐号绑定的抖音号且视频内容符合任务要求。
					</view>
				</view>
				<view class="next-btn" @click="uploadVideo" v-if="videoStatus == 0">
					确认提交
				</view>
				<view class="next-btn" @click="close" v-if="videoStatus == 1">
					继续做任务
				</view>
				<view class="next-btn" @click="uploadVideo" v-if="videoStatus == 4">
					重新上传链接
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	export default {
		name: 'wx-auth',
		props: {
			authType: {
				type: Array,
				default(){
					return ['authAvatar']
				}
			},
			// videoStatus:{ // 用户展示状态0 未完成 1 审核中 2 已完成未领取， 3已领取 4 审核失败
			// 	type: Number,
			// 	default(){
			// 		return 0
			// 	}
			// },
			// videolink:{ 
			// 	type: String,
			// 	default(){
			// 		return ''
			// 	}
			// },
			checkItem:{ 
				type: Object,
				default(){
					return {}
				}
			}
		},
		computed:{
			...mapState(['userinfo'])
		},
		data() {
			return {
				videoStatus: this.checkItem.show_status, 
				videolink: this.checkItem.task_content
			};
		},
		methods: {
			inputChange(event){
				let value = event.target.value
				let newVal = this.httpString(value)
				this.videolink =  newVal[0]
			},
			close(){
				uni.$emit('pop_close')
			},
			checkLink(str){
				let newStr=str.indexOf("http");
				if(newStr == 0){
					return true
				}else {
					return false
				}
			},
			httpString(s) {
			    var reg = /(http:\/\/|https:\/\/)((\w|=|\?|\.|\/|&|-)+)/g;
			    // var reg= /(https?|http|ftp|file):\/\/[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]/g;
			    s = s.match(reg);
			    return(s)
			},
			uploadVideo(){
				// || !this.checkLink(this.videolink)
				if(!this.videolink){
					uni.showToast({
						title: "请输入视频链接",
						icon: "none"
					})
				}else{
					let strArray = this.httpString(this.videolink)
					if(!strArray || strArray.length < 1){
						uni.showToast({
							title: "请输入有效的视频链接",
							icon: "none"
						})
						return
					}
					uni.showModal({
						content: '提交后将不可修改',
						confirmText: '确认提交',
						success:  (res) => {
						    if (res.confirm) {
								let params = {
									url: strArray[0],
									task_id: this.checkItem.id
								}
								
								if(this.videoStatus == 4){
									params.task_record_id  = this.checkItem.record_id
								}
						        this.$api.doTask(params).then(res => {
						        		 // 提交成功 2 当前链接已经被指用  3 失败 4 标识任务已经做过
						        		// uni.$emit('refresh_list')
						        		// this.close()
						        		let {status} = res
						        		if(status == 1){
						        			uni.showToast({
						        				title: '提交成功',
						        				icon:'none'
						        			})
						        			setTimeout(() => {
						        				uni.$emit('refresh_list')
						        				this.close()
						        			}, 1500)
						        			
						        		}else if(status == 2){
						        			uni.showModal({
						        				showCancel: false,
						        			    content: '当前视频链接已被使用过，无法重复使用',
						        			    success:  (res) => {
						        			        if (res.confirm) {
						        			            console.log('用户点击确定');
						        						this.videolink = null
						        			        } else if (res.cancel) {
						        			            console.log('用户点击取消');
						        			        }
						        			    }
						        			});
						        		}else if(status == 4){
						        			uni.showModal({
						        				showCancel: false,
						        			    content: '当前任务审核失败，请明日再来',
						        			    success:  (res) => {
						        			        if (res.confirm) {
						        						uni.$emit('refresh_list')
						        						this.close()
						        			        } else if (res.cancel) {
						        			           uni.$emit('refresh_list')
						        			           this.close()
						        			        }
						        			    }
						        			});
						        		}else {
						        			uni.showToast({
						        				title: '提交失败',
						        				icon:'none'
						        			})
						        		}
						        	})
						        
						    } else if (res.cancel) {
						        console.log('用户点击取消');
						    }
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.modal{
		position: fixed;
		top: 0;
		.modal-bkg{
			position: fixed;
			top: 0;
			background-color: rgba(0,0,0,.5);
			width: 100vw;
			height: 100vh;
		}
		.modal-pop{
			position: absolute;
			top: calc(50vh - 146px);
			left: calc(50vw - 160px);
			width: 320px;
			height: 292px;
			background-image: url('@/static/index/img_modal_card_01@2x.png');
			background-size: 320px 292px;
			.close{
				position: absolute;
				top: -56px;
				right: 0;
				width: 72px;
				height: 56px;
				background: url('@/static/btn/btn_32_ghost_shadow_nor@2x.png');
				background-size: 72px 56px;
				display: flex;
				align-items: center;
				justify-content: center;
				img{
					width: 15px;
					height: 15px;
				}
			}
			.pop-main{
				width: 248px;
				margin: 25px auto;
				.title{
					width: 64px;
					height: 22px;
					font-size: 16px;
					color: #F82045;
					font-weight: 600;
				}
				.main{
					margin-top: 41px;
					.status{
						width: 248px;
						height: 28px;
						background: #FFECEE;
						border-radius: 8px;
						padding: 0 12px;
						display: flex;
						align-items: center;
						.icon{
							width: 16px;
							height: 16px;
						}
						.desc{
							flex: 1;
							font-size: 14px;
							color: #F82045;
							font-weight: 500;
							padding-left: 4px;
						}
						&.doing{
							background-image: url('@/static/ani/ani_progress_bar_vid_review.gif');
							background-size:  248px 28px;;
						}
						&.doing, &.fail{
							margin-top: -15px;
						}
					}
					input{
						width: 248px;
						height: 48px;
						background: #F5F5F5;
						border-radius: 8px;
						padding-left: 10px;
						padding-right: 10px;
						margin-top: 12px;
					}
					.input-desc{
						// height: 58px;
						background: #FDF8DF;
						border-radius: 8px;
						padding: 8px 12px;
						font-size: 10px;
						color: #805340;
						margin-top: 12px;
					}
				}
				.next-btn{
					width: 152px;
					height: 56px;
					margin: 12px auto 0;
					text-align: center;
					line-height: 56px;
					background: url('@/static/btn/btn_32_red_152_shadow_nor@2x.png');
					background-size: 152px 56px;
					background-repeat: no-repeat;
					color: #FFFFFF;
					font-weight: 500;
				}
			}
			
		}
		
	}
</style>
